<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet" type="text/css" />
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <title>车辆违法记录</title>
</head>
<body>
<h1 align="center">车辆违法记录</h1>
<div>
    <form action="recordlist" method="post">
        <span>车牌号<input type="text" name="carnumber"/></span>
        <span>违法开始时间<input type="text" name="start"/></span>
        <span>违法结束时间<input type="text" name="end"/></span>
        <button type="submit" class="btn btn-danger">查询</button>
        <a th:href="record" th:type="button" class="btn btn-primary">添加违法记录</a>
    </form>
</div>
<div>
    <table class="table table-hover">
        <tr>
            <th>序号</th>
            <th>违法时间</th>
            <th>车牌号</th>
            <th>车主姓名</th>
            <th>车主手机号</th>
            <th>违法代码</th>
            <th>违法行为</th>
            <th>违法地点</th>
            <th>罚款</th>
            <th>记分</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tbody id="recordList">
        <tr th:each="record:${records}">
            <td th:text="${recordStat.count}"></td>
            <td th:text="${record.illegalTime}"></td>
            <td th:text="${record.carNumber}"></td>
            <td th:text="${record.user.userName}"></td>
            <td th:text="${record.user.tel}"></td>
            <td th:text="${record.item.illegalNumber}"></td>
            <td th:text="${record.item.illegalBehavior}"></td>
            <td th:text="${record.illegalSite}"></td>
            <td th:text="${record.item.penalty}"></td>
            <td th:text="${record.item.score}"></td>
            <td th:if="${record.state}==1">已处理</td>
            <td th:if="${record.state}==0">待处理</td>
            <td >
                <button  id="edit"  class="btn btn-primary" th:disabled="${record.state} == 1" th:onclick="'javascript:edit(\''+${record.id}+'\')'">编辑</button>
                <button  id="deal" class="btn btn-success" th:disabled="${record.state} == 1" th:onclick= "'javascript:deal(\''+${record.item.penalty}+'\',\''+${record.item.score}+'\',\''+${record.user.userId}+'\')'">处理</button>
                <script type="text/javascript">
                    function edit(id) {
                        console.log(id)
                        location.href="editRecord?id="+id;
                    }
                    function deal(penalty,score,userid) {
                        location.href="dealrecord?penalty="+penalty+"&score="+score+"&userid="+userid;
                    }
                </script>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div align="center">
<nav aria-label="Page navigation" >
    <ul class="pagination">

        <!-- 首页 -->
        <li>
            <a th:href="'/recordlist?pageNum=0'">首页</a>
        </li>

        <!-- 上一页 -->
        <li th:if="${records.hasPrevious()}">
            <a th:href="'/recordlist?pageNum=' + ${records.previousPageable().getPageNumber()}" th:text="上一页"></a>
        </li>

        <!-- 中间页 -->
        <li th:each="pageNum:${#numbers.sequence(0, records.getTotalPages() - 1)}">
            <a th:href="'/recordlist?pageNum=' + ${pageNum}" th:text="${pageNum + 1}" th:if="${pageNum ne records.pageable.getPageNumber()}"></a>
            <a th:href="'/recordlist?pageNum=' + ${pageNum}" th:text="${pageNum + 1}" th:if="${pageNum eq records.pageable.getPageNumber()}" th:style="'font-weight:bold;background: #6faed9;'"></a>
        </li>

        <!-- 下一页 -->
        <li th:if="${records.hasNext()}">
            <a th:href="'/recordlist?pageNum=' + ${records.nextPageable().getPageNumber()}" th:text="下一页"></a>
        </li>

        <!-- 尾页 -->
        <li>
            <a th:href="'/recordlist?pageNum=' + ${records.getTotalPages() - 1}">尾页</a><br>
        </li>
        <li>
            <p th:text="'第'+${records.getNumber()+1}+'页'+'/'+'共'+${records.getTotalElements()}+'条数据'+'/'+'共'+${records.getTotalPages()+'页'}" ></p>
        </li>
    </ul>
</nav>

</div>
</body>
</html>